<html>
<head>
	<title>Flight - H!Indonesia</title>
	<script type="text/javascript" src="script/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="script/plugins/jquery.tabify.js"></script>
	<script type="text/javascript" src="script/plugins/jquery.tipsy.js"></script>
	<script type="text/javascript" src="script/jquery-ui.js"></script>
	<script type="text/javascript" src="script/plugins/jquery.carouFredSel.js"></script>
	<script type="text/javascript" src="script/common.js"></script>
	<link rel="stylesheet" type="text/css" href="css/960.css" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<link rel="stylesheet" type="text/css" href="css/plugins/tipsy.css" />
	<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
	<script type="text/javascript">
		(function( $ ) {
			$.widget( "custom.combobox", {
				_create: function() {
					this.wrapper = $( "<span>" )
					.addClass( "custom-combobox" )
					.insertAfter( this.element );
					this.element.hide();
					this._createAutocomplete();
					this._createShowAllButton();
				},
				_createAutocomplete: function() {
					var selected = this.element.children( ":selected" ),
					value = selected.val() ? selected.text() : "";

					this.input = $( "<input>" )
						.appendTo( this.wrapper )
						.val( value )
						.attr( "title", "" )
						.addClass( "custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left" )
						.autocomplete({
							delay: 0,
							minLength: 0,
							source: $.proxy( this, "_source" )
						})
						.tooltip({
							tooltipClass: "ui-state-highlight"
						});

					this._on( this.input, {
						autocompleteselect: function( event, ui ) {
						ui.item.option.selected = true;
						this._trigger( "select", event, {
						item: ui.item.option
						});
					},

					autocompletechange: "_removeIfInvalid"
					});
				},
				_createShowAllButton: function() {
					var input = this.input,
					wasOpen = false;
					$( "<a>" )
						.attr( "tabIndex", -1 )
						//.attr( "title", "Show All Items" )
						//.tooltip()
						.appendTo( this.wrapper )
						.button({
							icons: {
								primary: "ui-icon-triangle-1-s"
							},
							text: false
						})
						.removeClass( "ui-corner-all" )
						.addClass( "custom-combobox-toggle ui-corner-right" )
						.mousedown(function() {
							wasOpen = input.autocomplete( "widget" ).is( ":visible" );
						})
						.click(function() {
							input.focus();
							// Close if already visible
							if ( wasOpen ) {
								return;
							}
							// Pass empty string as value to search for, displaying all results
							input.autocomplete( "search", "" );
						});
				},
				_source: function( request, response ) {
					var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" );
					response( this.element.children( "option" ).map(function() {
					var text = $( this ).text();
						if ( this.value && ( !request.term || matcher.test(text) ) )
							return {
								label: text,
								value: text,
								option: this
							};
					}) );
				},
				_removeIfInvalid: function( event, ui ) {
					// Selected an item, nothing to do
					if ( ui.item ) {
						return;
					}
					// Search for a match (case-insensitive)
					var value = this.input.val(),
					valueLowerCase = value.toLowerCase(),
					valid = false;
					this.element.children( "option" ).each(function() {
						if ( $( this ).text().toLowerCase() === valueLowerCase ) {
							this.selected = valid = true;
							return false;
						}
					});
					// Found a match, nothing to do
					if ( valid ) {
						return;
					}
					// Remove invalid value
					this.input
						.val( "" )
						// .attr( "title", value + " didn't match any item" )
						// .tooltip( "open" );
						this.element.val( "" );
						this._delay(function() {
							this.input.tooltip( "close" ).attr( "title", "" );
						}, 2500 );
						this.input.data( "ui-autocomplete" ).term = "";
				},
				_destroy: function() {
					this.wrapper.remove();
					this.element.show();
				}
			});
		})( jQuery );

		$.fn.carouFredSel.defaults.items.visible = 1;

		$(function(){
			$("#flight-carousel").carouFredSel({
				width: 630,
				height: 304,
				align: "center",
				auto: true,
				circular: true,
				prev: '.prev',
				next: '.next'
			});

			$("#tab-flight").tabify();

			$("ul.tabs-menu li").click(function () {
				$('.tabs-content').fadeIn(500);
			});

			//hide return and set one way checked
	    	var $radios = $('input:radio[name="flight-tip"]');
	        if($radios.is(':checked') === false) {
	            $radios.filter('[value=one-way]').prop('checked', true);
	            $('#cont-return').hide();
	        }

    	    $('input:radio[name="flight-tip"]').click(function() {
    	        $value = $(this).val();
    	        if ( $value == "round-trip" ) {
    	            $('#cont-return').fadeIn(250)();
    	        } else {
    	            $('#cont-return').fadeOut(250);
    	        }
    	    });

			/* jQuery UI */
			$("#select-origin, #select-destination").combobox();
			$("#depart").datepicker({
				setDate: +0,
				numberOfMonths: 3,
				minDate: 0,
				onClose: function( selectedDate ) {
					$( "#return" ).datepicker( "option", "minDate", selectedDate );
				}
			});
			$("#depart").datepicker("setDate", "+0");

			$("#return").datepicker({
				setDate: +1,
				numberOfMonths: 3,
				minDate: 0,
				onClose: function( selectedDate ) {
					$( "#depart" ).datepicker( "option", "maxDate", selectedDate );
				}
			});
			$("#return").datepicker("setDate", "+1");
		});
	</script>
</head>
<body>
	<div class="container_24">
		<header>
			<div class="header-wrapper clearfix">
				<div id="top-bar" class="grid_24">
					<div class="login-box">
						<span class="sign-up-left">
							<a href="#">Sign Up</a>
						</span>
						<span class="separate-or">
						or
						</span>
						<span class="sign-in-right">
							<a href="#">Log In</a>
						</span>
					</div>
					<div class="search-box">
						<button class="search-trigger"></button>
						<input type="text" id="search-keyword" placeholder="search">
					</div>
				</div>
				<div id="site-logo" class="grid_7">
					<a href="#">
						<img src="img/assets/logo.png" alt="H!Indonesia | Online Tourism Information and Booking Ticket"> 
					</a>
				</div>
				<nav id="top-nav" class="grid_17">
					<ul id="menu">
						<li><a href="#">home</a></li>
						<li class="drop"><a href="#">book</a>
							<ul>
								<li><a href="#">flight</a></li>
								<li><a href="#">hotel</a></li>
							</ul>
						</li>
						<li><a href="#">plan</a></li>
						<li><a href="#">explore</a></li>
						<li><a href="#">news</a></li>
						<li><a href="#">travel notes</a></li>
						<li><a href="#">travel guide</a></li>
						<li><a href="#">faq</a></li>
						<li><a href="#">about us</a></li>
					</ul>
				</nav>
			</div>
		</header>
		<section class="sidebar-left grid_8">
			<div class="flight-left">
				<div class="search-flight">
					<h2>Search Details</h2>
					<form method="post" autocomplete="off">
						<ul>
							<li>
								<input type="radio" name="flight-tip" id="one-way" value="one-way"><label for="one-way">One Way</label>
							</li>
							<li>
								<input type="radio" name="flight-tip" id="round-trip" value="round-trip"><label for="round-trip">Round Trip</label>
							</li>
						</ul>
						<div class="cols">
							<label for="from">From</label>
							<select id="select-origin" class="large">
								<option value="CGK">Jakarta - CGK</option>
								<option value="BPN">BalikPapan - BPN</option>
								<option value="BTJ">Banda Aceh - BTJ</option>
								<option value="BDO">Bandung - BDO</option>
							</select>
						</div>
						<div class="cols">
							<label for="to">To</label>
							<select id="select-destination" class="large">
								<option value="DPS">Denpasar - DPS</option>
								<option value="BPN">BalikPapan - BPN</option>
								<option value="BTJ">Banda Aceh - BTJ</option>
								<option value="BDO">Bandung - BDO</option>
							</select>
						</div>
						<div class="cols">
							<label for="depart">Departing</label><br>
							<input type="text" id="depart" name="depart" class="datepicker">
						</div>
						<div id="cont-return" class="cols">
							<label for="return">Returning</label><br>
							<input type="text" id="return" name="return" class="datepicker">
						</div>
						<div class="cols">
							<div class="passenger">
								<label for="adult">Adult</label>
								<select name="adult" id="adult">
					            	<option selected="selected" value="1">1</option>
			                    	<option value="2">2</option>
			                    	<option value="3">3</option>
			                    	<option value="4">4</option>
			        			</select>
			        		</div>
			        		<div class="passenger">
								<label for="child">Child <sub>(2-12 yrs)</sub></label>
								<select name="child" id="child">
			       	            	<option selected="selected" value="0">0</option>
			                    	<option value="1">1</option>
			                    	<option value="2">2</option>
			                    	<option value="3">3</option>
			                    	<option value="4">4</option>
			        			</select>
			        		</div>
		        			<div class="passenger">
								<label for="infant">Infant <sub>(<2 yrs)</sub></label>
								<select name="infant" id="infant">
			       	            	<option selected="selected" value="0">0</option>
			                    	<option value="1">1</option>
			                    	<option value="2">2</option>
			                    	<option value="3">3</option>
			                    	<option value="4">4</option>
			        			</select>
			        		</div>
						</div>
						<div class="cols clearfix">
							<input type="submit" value="Search" class="button"> 
						</div>
					</form>
				</div>
				<div class="airlines-brand-list">
					<h2>Airlines</h2>
					<ul class="clearfix">
						<li><img src="img/assets/icon_citilink.jpg" alt="Citilink">Citilink</li>
						<hr>
						<li><img src="img/assets/icon_lion.jpg" alt="Lion Air">Lion Air</li>
						<hr>
						<li><img src="img/assets/icon_batavia.jpg" alt="Batavia Air">Batavia Air</li>
						<hr>
						<li><img src="img/assets/icon_garuda.jpg" alt="Garuda Indonesia">Garuda Indonesia</li>
						<hr>
						<li><img src="img/assets/icon_merpati.jpg" alt="Merpati Air">Merpati Air</li>
						<hr>
						<li><img src="img/assets/icon_airasia.jpg" alt="Air Asia">Air Asia</li>
					</ul>
				</div>
				<div class="promo-flight">
					<h2>Promo Flight</h2>
					<div class="wrap-promo-flight">
						<div class="promo-flight-item">
							<a href="#" title="Tiket Pesawat Promo dari Bandung ke Surabaya">
								<h4>Bandung <img src="img/icons/icon-arrow-to.png" alt="to"> Surabaya</h4>
								<div class="promo-flight-date">24 May 2013, 11:40 - 12:20</div>
								Promo Price<strong class="currency" rel="400000">IDR 400.000,00</strong>
							</a>
						</div>
						<hr>
						<div class="promo-flight-item">
							<a href="#" title="Tiket Pesawat Promo dari Bandung ke Surabaya">
								<h4>Bandung <img src="img/icons/icon-arrow-to.png" alt="to"> Surabaya</h4>
								<div class="promo-flight-date">24 May 2013, 11:40 - 12:20</div>
								Promo Price<strong class="currency" rel="400000">IDR 400.000,00</strong>
							</a>
						</div>
						<hr>
						<div class="promo-flight-item">
							<a href="#" title="Tiket Pesawat Promo dari Bandung ke Surabaya">
								<h4>Bandung <img src="img/icons/icon-arrow-to.png" alt="to"> Surabaya</h4>
								<div class="promo-flight-date">24 May 2013, 11:40 - 12:20</div>
								Promo Price<strong class="currency" rel="400000">IDR 400.000,00</strong>
							</a>
						</div>
						<hr>
						<em>* Price is subject to change without prior notice</em>
					</div>
				</div>
			</div>
		</section>
		<section class="main-content grid_16">
			<div class="flight-detail">
				<div class="flight-feature">
					<div id="flight-carousel">
						<a href="#" title="Tiket Pesawat Jakarta (CGK) ke Surabaya (SUB) Bulan Mei 2013"><img src="img/static/banner_cgk_sub.jpg" alt="Tiket Pesawat Jakarta (CGK) ke Surabaya (SUB) Bulan Mei 2013"></a>
						<a href="#" title="Tiket Pesawat Jakarta (CGK) ke Denpasar, Bali (DPS) Bulan Mei 2013"><img src="img/static/banner_cgk_dps.jpg" alt="Tiket Pesawat Jakarta (CGK) ke Surabaya (SUB) Bulan Mei 2013"></a>
					</div>
					<div class="fligth-pages">
						<div class="next"></div>
						<div class="prev"></div>
					</div>
				</div>
				<div class="flight-cheap-price">
					<h2>Cheapest Airfares to Popular Destinations</h2>
					<ul id="tab-flight" class="tabs-menu clearfix">
						<!-- <li class="from">
							<span>From</span>
						</li> -->
		                <li class="active">
		                	<a href="#destination-cgk">Jakarta</a>
		                </li>
		                <li>
		                	<a href="#destination-bdo">Bandung</a>
		                </li>
		                <li>
		                	<a href="#destination-dps">Bali</a>
		                </li>
		                <li>
		                	<a href="#destination-sub">Surabaya</a>
		                </li>
		            </ul>
		            <div class="flight-content">
						<div id="destination-cgk" class="tabs-content clearfix">
							<div class="flight-item clearfix">
								<a href="#" title="Cheapest Rate Lion Air from Jakarta to Bali">
									<div class="col flight-tip"><h4>Jakarta <img alt="to" src="img/icons/icon-arrow-to.png"> Bali</h4></div>
									<div class="col airline"><img src="img/assets/icon_lion.jpg" alt="Lion Air"> JT 150</div>
									<div class="col flight-date">
										<strong class="day">Wed, 05 June 2013</strong>
										<span class="duration">16:10 - 18:55 (1h 45m)</span>
									</div>
									<div class="col flight-price">
										<strong class="currency" rel="400000">IDR 400.000,00</strong>
									</div>
								</a>
							</div>
							<div class="flight-item clearfix">
								<a href="#" title="Cheapest Rate Lion Air from Jakarta to Makassar">
									<div class="col flight-tip"><h4>Jakarta <img alt="to" src="img/icons/icon-arrow-to.png"> Makassar</h4></div>
									<div class="col airline"><img src="img/assets/icon_lion.jpg" alt="Lion Air"> JT 150</div>
									<div class="col flight-date">
										<strong class="day">Wed, 05 June 2013</strong>
										<span class="duration">16:10 - 18:55 (1h 45m)</span>
									</div>
									<div class="col flight-price">
										<strong class="currency" rel="400000">IDR 400.000,00</strong>
									</div>
								</a>
							</div>
							<div class="flight-item clearfix">
								<a href="#" title="Cheapest Rate Lion Air from Jakarta to Surabaya">
									<div class="col flight-tip"><h4>Jakarta <img alt="to" src="img/icons/icon-arrow-to.png"> Surabaya</h4></div>
									<div class="col airline"><img src="img/assets/icon_lion.jpg" alt="Lion Air"> JT 150</div>
									<div class="col flight-date">
										<strong class="day">Wed, 05 June 2013</strong>
										<span class="duration">16:10 - 18:55 (1h 45m)</span>
									</div>
									<div class="col flight-price">
										<strong class="currency" rel="400000">IDR 400.000,00</strong>
									</div>
								</a>
							</div>
							<div class="flight-item clearfix">
								<a href="#" title="Cheapest Rate Lion Air from Jakarta to Medan">
									<div class="col flight-tip"><h4>Jakarta <img alt="to" src="img/icons/icon-arrow-to.png"> Medan</h4></div>
									<div class="col airline"><img src="img/assets/icon_lion.jpg" alt="Lion Air"> JT 150</div>
									<div class="col flight-date">
										<strong class="day">Wed, 05 June 2013</strong>
										<span class="duration">16:10 - 18:55 (1h 45m)</span>
									</div>
									<div class="col flight-price">
										<strong class="currency" rel="400000">IDR 400.000,00</strong>
									</div>
								</a>
							</div>
						</div>
						<div id="destination-bdo" class="tabs-content clearfix">
							
						</div>
						<div id="destination-dps" class="tabs-content clearfix">
							
						</div>
						<div id="destination-sub" class="tabs-content clearfix">
							
						</div>
					</div>
				</div>
			</div>
		</section>
		<footer>
			<nav class="clearfix">
				<ul class="bottom-nav grid_24">
		          <li><a href="#">About Us</a></li>
		          <li><a href="#">FAQ</a></li>
		          <li><a href="#">Contact Us</a></li>
		          <li><a href="#">Jobs</a></li>
		          <li><a href="#">Our Partner</a></li>
		          <li><a href="#">Press</a></li>
		        </ul>
	        </nav>
	        <section class="footer">
	        	<div class="footer-wrapper clearfix">
		        	<div class="footer-left grid_12">
		        		<ul>
		        			<li><a href="#">Terms of service</a></li>
		        			<li><a href="#">Privacy</a></li>
		        			<li><a href="#">Feedback & support</a></li>
		        		</ul>
		        		<div class="copyright">
		        			&copy; 2013 Hi-Indonesia. All rights reserved.
		        		</div>
		        	</div>
		        	<div class="footer-right grid_12">
		        		<ul>
		        			<li><a href="#">English</a></li>
		        			<li><a href="#">Bahasa</a></li>
		        		</ul>
		        	</div>
	        	</div>
	        </section>
		</footer>
	</div> 
</body>
</html>